@extends('admin.main')

@section('head')
    <style>
        .upload-button {
            position: relative;
            display: inline-block;
            padding: 4px 12px;
            overflow: hidden;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            color: #fff;
            background-color: #27ae60;
            text-align: center;
            width: 100px;
        }
        .upload-button input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .upload-img-box .upload-pre-item {
            float: left;
            padding: 10px;
            margin: 1px 10px 1px 1px;
            width: 500px;
            max-height: 600px;
            overflow: hidden;
            text-align: center;
            cursor: pointer;
            border: 1px solid #ccc;
            background-color: #fff;
            transition: all .3s linear;
        }
        .upload-pre-item img{
            border-bottom: 1px solid #ccc;
            margin: 1px 10px 1px 1px;
            width: 500px;
            height: 550px;
        }
        .upload-pre-item div{
            background-color: lightgrey;
        }
        .main-title {
            padding-bottom: 8px;
            height: 20px;
        }
        #personal_qr {
            width: 380px;
            height: 675px;
        }
        .example-img a{
            color: #ffffff;
        }
        .example-img a:hover {
            text-decoration: none;
        }

    </style>
@endsection

@section('body')
    <div class="main-title">
        <h2>微信设置</h2>
    </div>
    <div class="tab-wrap">
        <ul class="tab-nav nav" id="tab_ul">
            @if(plat_identify() == 'admin')
            <li class="current" id="xcx"><a href="javascript:;">小程序配置</a></li>
            <li id="gzh"><a href="javascript:;">公众号配置</a></li>
            <li id="wxpay"><a href="javascript:;">微信支付配置</a></li>
            {{--<li id="xcxtmpl"><a href="javascript:;">小程序消息配置</a></li>--}}
            <li id="auth"><a href="javascript:;">一键授权</a></li>
            <li id="share"><a href="javascript:;">分享配置</a></li>
            @endif

            @if(session('shop_info'))
            <li id="qrCode" @if(plat_identify() == 'account') class="current" @endif><a href="javascript:;">微店二维码</a></li>
            @endif
        </ul>
        <div class="tab-content">
            <form action="" method="post" class="form-horizontal">
                @if(plat_identify() == 'admin')
                <div id="xcx_div">
                    <div class="form-item">
                        <label class="item-label">小程序app_id<span class="check-tips"></span></label>
                        <div class="controls">
                            <input type="text" class="text input-large" name="xcx_app_id" value="{{isset($info) ? $info['xcx_app_id'] : ''}}">
                        </div>
                    </div>
                    <div class="form-item">
                        <label class="item-label">小程序app_secret<span class="check-tips"></span></label>
                        <div class="controls">
                            <input type="text" class="text input-large" name="xcx_app_secret" value="{{isset($info) ? $info['xcx_app_secret'] : ''}}">
                        </div>
                    </div>
                </div>
                <div id="gzh_div" style="display: none">
                    <div class="form-item">
                        <label class="item-label">公众号app_id<span class="check-tips"></span></label>
                        <div class="controls">
                            <input type="text" class="text input-large" name="wx_app_id" value="{{isset($info) ? $info['wx_app_id'] : ''}}">
                        </div>
                    </div>
                    <div class="form-item">
                        <label class="item-label">公众号app_secret<span class="check-tips"></span></label>
                        <div class="controls">
                            <input type="text" class="text input-large" name="wx_app_secret" value="{{isset($info) ? $info['wx_app_secret'] : ''}}">
                        </div>
                    </div>
                    <div class="form-item">
                        <label class="item-label">公众号aes_key<span class="check-tips"></span></label>
                        <div class="controls">
                            <input type="text" class="text input-large" name="wx_aes_key" value="{{isset($info) ? $info['wx_aes_key'] : ''}}">
                        </div>
                    </div>
                </div>
                <div id="wxpay_div" style="display: none">
                    <div class="form-item">
                        <label class="item-label">微信支付mch_id<span class="check-tips"></span></label>
                        <div class="controls">
                            <input type="text" class="text input-large" name="mch_id" value="{{isset($info) ? $info['mch_id'] : ''}}">
                        </div>
                    </div>
                    <div class="form-item">
                        <label class="item-label">微信支付mch_key<span class="check-tips"></span></label>
                        <div class="controls">
                            <input type="text" class="text input-large" name="mch_key" value="{{isset($info) ? $info['mch_key'] : ''}}">
                        </div>
                    </div>
                </div>
                {{--<div id="xcxtmpl_div" style="display: none">--}}
                    {{--<div class="form-item">--}}
                        {{--<label class="item-label">订单配送消息模板ID<span class="check-tips">(该通知模板用于给用户发送订单配送通知消息)</span></label>--}}
                        {{--<div class="controls">--}}
                            {{--<input type="text" class="text input-large" name="xcx_notice_send_id" value="{{isset($info) ? $info['xcx_notice_send_id'] : ''}}">--}}
                        {{--</div>--}}
                    {{--</div>--}}
                    {{--<div class="form-item">--}}
                        {{--<label class="item-label">订单完成消息模板ID<span class="check-tips">(该通知模板用于给用户发送订单完成通知消息)</span></label>--}}
                        {{--<div class="controls">--}}
                            {{--<input type="text" class="text input-large" name="xcx_notice_complete_id" value="{{isset($info) ? $info['xcx_notice_complete_id'] : ''}}">--}}
                        {{--</div>--}}
                    {{--</div>--}}
                {{--</div>--}}
                <div id="auth_div" style="display: none">
                    <div class="form-item">
                        <label class="item-label">一键授权<span class="check-tips">(只需要一键操作，商户即可通过趣订水管理后台提供的微信功能服务，方便快捷的对公众号各种功能进行管理和配置，为商户省去各种接入烦恼)</span></label>
                        <div class="controls">
                            {{--<a  class="btn btn-return" href="https://mp.weixin.qq.com/cgi-bin/componentloginpage?component_appid=wx87101e2e56742b11&pre_auth_code=@ViewBag.PreAuthCode&redirect_uri=@ViewBag.RedirectUri">微信公众号一键授权</a>--}}
                            <a style="text-decoration:none;" href="{{urlAdmin('wechat','getAuth')}}" id="authurl" style="display: inline;"><img src="https://open.weixin.qq.com/zh_CN/htmledition/res/assets/res-design-download/icon_button3_1.png"></a>

                        </div>
                        {{--<button class="btn" onclick="javascript:window.location.href=;return false;">返 回</button>--}}
                        {{--<label class="item-label">一键授权<span class="check-tips"></span></label>--}}
                        {{--<div class="controls">--}}
                            {{--<a href="https://mp.weixin.qq.com/cgi-bin/componentloginpage?component_appid=@ViewBag.ServerAppID&pre_auth_code=@ViewBag.PreAuthCode&redirect_uri=@ViewBag.RedirectUri">--}}
                                {{--<img src="~/Content/themes/base/images/icon_button3_1.png" />--}}
                            {{--</a>--}}
                            {{--<input type="text" class="text input-large" name="xcx_notice_send_id" value="{{isset($info) ? $info['xcx_notice_send_id'] : ''}}">--}}
                        {{--</div>--}}
                    </div>
                </div>
                <div id="share_div" style="display: none">
                    <div class="form-item">
                        <label class="item-label">背景图片<span class="check-tips">（格式为jpg、png、gif，上传图片大小必须在2M以下）</span></label>
                        <div class="controls upload-button">
                            <span class="uploadify-button-text">上传图片</span>
                            <input type="file" id="uploadImage" accept="image/png,image/jpeg,image/gif" num="1"
                                   onchange="upload(this,'share_img','pics[]')" count="{{$imgCount}}"/>
                        </div>
                        <div class="controls upload-button example-img">
                            <a href="{{ urlPlat($ctr,'getQrDown', ['type'=>'example']) }}">示例图片下载</a>
                        </div>
                        <div class="controls upload-img-box">
                            @if(isset($info) && $imgCount)
                                <div class="upload-pre-item"  id="share_img_0">
                                    <img src="/uploads/share/{{$info['wx_app_id']}}_1.{{$ext}}?{{time()}}"/>
                                    <div class="share_img_0" onclick="delImg('uploadImage','share_img_0')">删除</div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                @endif

                <div id="qrCode_div" @if(plat_identify() == 'admin')style="display: none"@endif>
                    <div class="form-item">
                        <label class="item-label">微店二维码</label>
                        <div class="controls">
                            @if($qrImg)
                                <img id="personal_qr" src="{{$qrImg}}" />
                            @else
                                <img id="personal_qr" />
                            @endif
                        </div>
                        <div class="controls">
                            <span class="btn btn-primary" onclick="createQr()">生成二维码</span>
                            <a class="btn btn-default" href="{{ urlPlat($ctr,'getQrDown',['type'=>'qr']) }}">下 载</a>
                        </div>
                    </div>
                </div>

                @if(plat_identify() == 'admin')
                    <div class="form-item" id="tijiao">
                        <div class="controls">
                            <input type="hidden" name="id" value="{{isset($info) ? $info['id'] : ''}}">
                            <button type="submit" class="btn submit-btn ajax-post" target-form="form-horizontal">确 定 </button>
                            <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
                        </div>
                    </div>
                @endif
            </form>
        </div>
    </div>
@endsection
@section('script')
    <script>
        $("#tab_ul > li").click(function(){
            var self = $(this);
            var id = self.attr('id');
            $("#tab_ul > li").each(function(i,n){
                var tem_id = $(n).attr('id');
                if(tem_id == id){
                    $(n).addClass('current');
                    $("#"+tem_id+"_div").show();
                    if (tem_id == 'auth' || tem_id == 'qrCode') {
                        $("#tijiao").hide();
                    } else {
                        $("#tijiao").show();
                    }
                } else {
                    $(n).removeClass('current');
                    $("#"+tem_id+"_div").hide();
                }
            });
        });

        function delImg(upInputId, fileId) {
            var _this = $("#" + upInputId);
            var count = parseInt(_this.attr('count'));
            _this.attr('count', count - 1);
            $("#" + fileId).remove();
        }

        function upload(obj, imgId, name) {
            console.log(imgId)
            console.log(name)
            var _self = obj;
            var _this = $(obj);
            var fileReader = new FileReader();
            fileReader.onload = function (e) {
                console.log(fileReader.readyState)
                console.log(FileReader.DONE)
                if (fileReader.readyState == FileReader.DONE) {
                    var file = _self.files[0];
                    var type = file.type;
                    var size = parseInt(file.size);
                    var allowSize = parseInt(2097152); //限制上传图片大小2M以下,2*1024*1024
                    if (size > allowSize) {
                        layer.msg('上传图片大小必须在2M以下');
                        return false;
                    }
                    var accept = _this.attr('accept');//上传图片数量
                    var param_num = _this.attr('num');//上传图片数量
                    var param_count = _this.attr('count');//已上传图片数量
                    var acceptArr = accept.split(",");
                    if ($.inArray(type, acceptArr) < 0) {
                        layer.msg('请上传'+accept+'等格式的文件');
                        return false;
                    }
                    if (param_num == null || param_num == undefined) {
                        _this.attr('num', 1);
                    }
                    if (param_count == null || param_count == undefined) {
                        _this.attr('count', 0);
                    }
                    var num = parseInt(_this.attr('num'));
                    var count = parseInt(_this.attr('count'));

                    if (count < num) {
                        count = count + 1;
                        var upFileId = _this.attr('id');
                        var fileId = imgId + '_' + count;
                        var func = 'delImg("' + upFileId + '","' + fileId + '")';
                        var html = '<div class="upload-pre-item" id="' + fileId + '"><img src="' + this.result + '"/><div class="' + fileId + '" onclick=' + func + '>删除</div><input type="hidden" name="' + name + '" class="' + fileId + '"  value="' + this.result + '"></div>';
                        console.log(html)
                        $('.upload-img-box').append(html);
                        _this.attr('count', count);
                    } else {
                        layer.msg('最多上传' + num + '张');
                        return false;
                    }
                    _self.value = ''; //清空上传成功后的value值
                }
            };
            //一次加载多个文件
            var i = 0, src = _self.files;
            fileReader.readAsDataURL(src[i]);
            fileReader.onloadend = function () {
                i++;
                if (i < src.length) fileReader.readAsDataURL(src[i]);
            }
        }

        function createQr()
        {
            var url = "{!! urlPlat('single','getQrCode') !!}";
            $.get(url).success(function(res){
                if(res.status == 1) {
                    $("#personal_qr").attr('src',res.url)
                } else {
                    layer.alert(res.info)
                }
            });
        }
    </script>
@endsection